<template>

	<scroll-view scroll-y class='data-list' scroll-y @scrolltolower="lower" >
	
	    <div class='data-item' v-for="(item,idx) in orderList" :key="idx">
	        <div class='data-img'>
	            <img   mode='widthFix'  :src='item.coffeeAbsoluteurl'></img>
	        </div>
	        <div class='data-desc'>
	            <div>{{pageText.orderName}}:<text>{{item.name}}</text></div>
	            <div>{{pageText.orderDate}}:<text>{{item.creatTime}}</text></div>
	            <div>{{pageText.orderNo}}:<text>{{item.code}}</text></div>
	        </div>
	        <div class='data-p'>
	            <div class='data-price'>￥{{item.pay}}</div>
	            <!-- 已发货 -->
	            <div class='data-status status1' v-if="item.deliveryStatus == 0">{{pageText.wfh}}</div> 
	            <!-- 未发货 -->
	            <div class='data-status status2 ' v-if="item.deliveryStatus == 1"> {{pageText.yfh}} </div>
	            <div class='data-status status3' v-if="item.deliveryStatus == 2">{{pageText.fhsb}} </div>
	            <!-- <view class='activity'>新用户首杯</view> -->
	        </div>
	    </div>
	    <div class="loading" v-if="LoadIng">正在加载……</div>
        <div class="noData" v-if="!more">没有更多了</div>
		<div class="noData" v-if="noData">没有记录</div>
	</scroll-view>

</template>
<script type="text/javascript">
	
	export default{
		props:[ 'orderList','more','LoadIng','noData'],
		data(){
			return{
				pageText :{
			        'orderName':'商品名称',
			        'orderDate':'订单时间',
			        'orderNo':'订单编号',
			        'yfh':'已发货',
			        'wfh':'未发货',
			        'fhsb':'发货失败',
			        'mysj':'没有更多'  
		    	}
			}
			
		},
		methods:{
			lower(){
				this.$emit('getNextPage')
			}
		}
		

	}
</script>

<style>
.data-list{
    position: fixed;
    top: 100rpx;
    left: 0;
    right: 0;
    bottom: 80rpx;

}
.data-item{
    display: flex;
    padding: 20rpx;
    background: #fff;
    color:#000;
    font-size: 26rpx;
    color: #b3b3b3;
    margin: 0 20rpx 30rpx 20rpx;

}

.data-item  .data-img image{width: 140rpx;height: 140rpx;border-radius: 10rpx;margin-right: 20rpx;}
.data-desc{
    flex: 1;
    font-size: 22rpx;
}
.data-desc view{margin-bottom: 10rpx;line-height: 40rpx;}
.data-desc view text{
    color: #000;
}
.data-p{width: 140rpx;text-align: center;}
.data-price{
    color: red;
    font-size: 30rpx;
    text-align: center;
    padding-top:12rpx;
}
.data-status{
    font-size: 20rpx;
    border: 2rpx solid #ccc;
    display: inline-block;
    margin: 0 auto;
    width: 100rpx;
    text-align: center;
    border-radius: 20rpx;
    margin-top: 10rpx;
}
.data-status.status1{
     border: 2rpx solid #ccc;
}
.data-status.status2{
    border: 2rpx solid #03a731;
    color: #03a731;
}
.data-status.status3{
    border: 2rpx solid red;
    color: red;
}

</style>